<template>
  <v-form v-model="valid" ref="myOrderForm">
    <v-layout wrap>
      <v-flex>
        <v-text-field v-model="Order.id" hidden />
        <v-layout>
          <v-text-field v-if="isEdit" v-model="Order.lsh" label="流水号" disabled />
          <v-text-field v-if="isEdit" v-model="Order.statusInfo" label="状态" disabled />
        </v-layout>
        <v-layout>
          <!-- <v-select
            item-text="driverName"
            item-value="driverCode"
            v-model="Order.driverCode"
            :items="drivers"
            label="司机"
            disabled
          />-->
          <v-select
            item-text="pathName"
            item-value="pathCode"
            v-model="Order.pathCode"
            :items="paths"
            label="录入路线"
            disabled
          />
          <v-text-field v-if="isEdit" v-model="Order.lrsj" label="录入时间" disabled />

          <!-- <v-text-field v-if="isEdit" v-model="Order.lrusername" label="录入人" disabled /> -->
        </v-layout>
        <v-layout>
          <!-- <v-text-field v-if="isEdit" v-model="Order.lrsj" label="录入时间" disabled /> -->
          <!-- <v-text-field v-if="isEdit" v-model="Order.fcsj" label="发出时间" required /> -->
          <!-- <v-text-field v-if="isEdit" v-model="Order.sdsj" label="送达时间" required /> -->
        </v-layout>

        <v-data-table
          :headers="headers"
          class="elevation-1"
          v-model="selected"
          item-key="lsh"
          :items="xsList"
          :pagination.sync="pagination"
          :total-items="totalGoods"
          :loading="loading"
        >
          <template slot="items" slot-scope="props">
         
            <td class="text-xs-center">{{ props.item.lsh }}</td>
            <td class="text-xs-center">{{ props.item.hh }}</td>
            <td class="text-xs-center">{{ props.item.pinm }}</td>
            <td class="text-xs-center">{{ props.item.xingh}}</td>
            <td class="text-xs-center">{{ props.item.sl }}</td>
            <td class="text-xs-center">{{ props.item.lxInfo }}</td>
            <td class="text-xs-center">{{ props.item.contact }}</td>
            <td class="text-xs-center">{{ props.item.phone }}</td>
            <td class="text-xs-center">{{ props.item.location }}</td>
            <td class="text-xs-center">{{ props.item.statusInfo }}</td>
          </template>
        </v-data-table>
        <v-layout>
          <v-spacer />
          <v-btn v-if="this.isEdit" @click="submit" color="primary">送达</v-btn>
        </v-layout>
      </v-flex>
    </v-layout>
  </v-form>
</template>

<script>
import VDistpicker from "v-distpicker";
export default {
  name: "logistics-form",
  props: {
    oldOrder: {
      type: Object
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      search: "",
      valid: false, // 表单校验结果标记
      Order: {
        lrusername: "", // 路线名称
        lsh: "", // 路线首字母
        status: 0, // 路线所属的商品分类数组
        driverCode: "",
        pathCode: "",
        xsList: []
      },
      singleSelect: false,
      selected: [],
      drivers: [],
      paths: [],
      nameRules: [v => !!v || "不能为空"],
      totalGoods: 0, // 总条数
      xsList: [], // 当前页品牌数据
      loading: true, // 是否在加载中
      pagination: {}, // 分页信息
      headers: [
        { text: "流水号", align: "center", sortable: false, value: "lsh" },
        { text: "货号", align: "center", sortable: false, value: "hh" },
        { text: "品名", align: "center", sortable: false, value: "pinm" },
        { text: "型号", align: "center", sortable: false, value: "xingh" },
        { text: "数量", align: "center", sortable: false, value: "sl" },
        { text: "商品类型", align: "center", sortable: false, value: "lx" },
        { text: "联系人", align: "center", sortable: false, value: "contact" },
        { text: "电话", align: "center", sortable: false, value: "phone" },
        { text: "地址", align: "center", sortable: false, value: "district" },
        { text: "状态", align: "center", sortable: false, value: "statusInfo" }
        // { text: "条码", align: "center", value: "tm", sortable: true },
        // { text: "重量", align: "center", value: "zhongl", sortable: false },
        // { text: "尺寸", align: "center", value: "chang", sortable: false },
      ],
      checkbox: false
    };
  },
  mounted() {
    console.info("form mounted");
    // 渲染后执行
    // 查询数据
  },
  watch: {
    pagination: {
      // 监视pagination属性的变化
      deep: true, // deep为true，会监视pagination的属性及属性中的对象属性变化
      handler() {
        // 变化后的回调函数，这里我们再次调用getDataFromServer即可
        this.getDataFromServer();
      }
    },
    filter: {
      // 监视搜索字段
      handler() {
        this.getDataFromServer();
      },
      deep: true
    }
  },
  methods: {
    del() {},

    getDataFromServer() {
      this.$http
        .get("/item/logistics/driverlist", {
          params: {}
        })
        .then(resp => {
          // 这里使用箭头函数
          this.drivers = resp.data;
          // 完成赋值后，把加载状态赋值为false
        });
      this.$http
        .get("/item/logistics/pathlist", {
          params: {}
        })
        .then(resp => {
          // 这里使用箭头函数
          this.paths = resp.data;
          // 完成赋值后，把加载状态赋值为false
          this.loading = false;
        }).catch(e=>this.loading=false);

      if (this.isEdit) {
        return;
      }
      console.info("form getDataFromServer");
      this.$http
        .get("/item/xsth/psmx", {
          params: {}
        })
        .then(resp => {
          // 这里使用箭头函数
          this.xsList = resp.data;
          this.totalGoods = resp.data.total;
          // 完成赋值后，把加载状态赋值为false
          this.loading = false;
        }).catch(e=>this.loading=false);
    },

    submit() {
      // 表单校验
      if (this.$refs.myOrderForm.validate()) {
        // 定义一个请求参数对象，通过解构表达式来获取Order中的属性
        const { ...params } = this.Order;
        params.lrusername = window.localStorage.getItem("username");
        params.lrid = window.localStorage.getItem("id");
        params.truename = window.localStorage.getItem("truename");
        // params.deptCode = window.localStorage.getItem("deptCode");
        // params.storeCode = window.localStorage.getItem("storeCode");
        var newArr = [];
        this.selected.forEach((item, index) => {
          var imgList = {};
          imgList.ddh = item.lsh;
          imgList.status = 1;
          newArr.push(imgList);
        });
        params.list = newArr;

        this.$http({
          method: "post",
          url: "/item/pstp/psdh",
          data: JSON.stringify(params),
          headers: {
            "Content-Type": "application/json;charset=UTF-8"
          }
        })
          .then(() => {
            // 关闭窗口
            this.$emit("close");
            this.$message.success("保存成功！");
          })
          .catch(e => {
            console.log(e);
            this.$message.error("保存失败！" + e.message);
          });
      }
    },

    clear() {
      // 重置表单
      this.$refs.myOrderForm.reset();
    },
    province(obj) {
      if (obj.code) {
        this.Order.province = obj.value;
      } else {
        this.Order.province = "";
      }
    },
    city(obj) {
      if (obj.code) {
        this.Order.city = obj.value;
      } else {
        this.Order.city = "";
      }
    },
    area(obj) {
      if (obj.code) {
        this.Order.district = obj.value;
      } else {
        this.Order.district = "";
      }
    }
  },
  watch: {
    oldOrder: {
      // 监控oldOrder的变化
      handler(val) {
        if (val) {
          console.info(val);
          this.getDataFromServer();

          // 注意不要直接复制，否则这边的修改会影响到父组件的数据，copy属性即可
          this.Order = Object.deepCopy(val);
          this.xsList = val.xsList;
          this.selected = this.xsList;
        } else {
          // 为空，初始化brand
          this.Order = {
            name: "",
            lsh: "",
            id: "",
            status: 0,
            province: "",
            city: "",
            district: "",
            hh: "",
            lrusername: "",
            contact: "",
            phone: "",
            qwsj: "",
            xsList: []
          };
        }
      },
      deep: true
    }
  },
  components: { VDistpicker }
};
</script>

<style scoped>
</style>
